<template>
	<div class="wrapper">
		<!-- 头部内容 -->
		<mt-header title="信息管理系统"></mt-header>
		<transition name="router" mode="out-in">
		<router-view></router-view>

		</transition>
		<!-- 底部内容 -->
		<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" :to="{name:'home'}">
				<span class="mui-icon icon-shouye1"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" :to="{name:'member'}">
				<span class="mui-icon icon-huiyuan1"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" :to="{name:'shopcart'}">
				<span class="mui-icon icon-gouwucheman"><span class="mui-badge" v-if="picNum != 0">{{picNum}}</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" :to="{name:'search'}">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">查找</span>
			</router-link>
		</nav>
	</div>
</template>

<script>
import connect from './components/common/connect.js';
//引入prodsTools
import prodTools from './components/common/prodTools.js';

	export default {
		data() {
			return {
				// picNum:0 
				picNum:prodTools.getTotalCount()
			}
		},
		created() {
			this.$ajax.get('src/dataJson/test.json')
				.then(res => {
					// console.log(res);
	
				});



/******************************************************************************************/
				//this.picNum //这里的this是VueComponent
				//console.log(connect); //Vue$3
				//记录this:	let self = this;
			
			//监听子组件		
		/*	connect.$on('addShopcart',function(num){
				//VueComponent Vue$3代表new Vue()对象
                //console.log(this);//Vue$3 //此处的this就是connect 而不是Vuecomponent
				//console.log(self);
			
								
				self.picNum += num;
			})*/


			//以上改造成如下,不用替换this即可
			connect.$on('addShopcart',num=>{								
				this.picNum += num;
			})


/******************************************************************************************/
		},
	}
</script>

<style scoped>
/*添加动画效果*/ 
.router-enter-active,.router-leave-active{
	transition: opacity .3s;
}	
.router-enter,.router-leave-to{
	 opacity: 0;
}
</style>







